<template>
	<div>
	<div class="app-container foSi14"  v-if="!auth_show">
		<div v-if="authenFind === 0  || authenFind.check_status === 2"
			style="width: 590px;padding-top: 90px;margin: 0 auto;">
			<div class="certified-title">实名认证，是签署电子合同的第一步，快进行认证吧</div>
			<div class="wid100 dis disJuC textCen">
				<div>
					<img src="../../../public/img/company-certification.png"
						style="width: 113px; height: 113px; margin: 0 auto 30px;">
					<div class="certified-type__content">营业执照实名认证</div>
					<div class="certified-type__sub-content">如果有营业执照<br>建议通过营业执照进行认证</div>
					<el-button class="certified-type__btn bac6b7" type="warning" style="width: 160px; height: 40px;"
						@click.stop="is_show=true">实名认证</el-button>
				</div>
			</div>
		</div>
		<div v-if="authenFind.check_status === 0" class="shenhe" style="width: 590px;padding-top: 90px;margin: 0 auto;display:flex;">
			<div class="certified-title">审核中，请点击认证</div>
			<div class="wid100 dis disJuC textCen">
				<div style="display: flex;flex-direction: column;align-items: center;">
					<img src="../../../public/img/company-certification.png"
						style="width: 113px; height: 113px; margin: 0 auto 30px;">
						<div style="display:flex">
							<el-button class="certified-type__btn bac6b7" type="warning" style="width: 160px;height: 40px;" @click.stop="consoleurlshow()">去认证</el-button>
							<el-button class="certified-type__btn bac6b7" type="warning" style="width: 160px;height: 40px;margin-left:10px" @click.stop="findent()">查询认证状态</el-button>
						</div>
					
				</div>
			</div>
		</div>
		<div v-if="authenFind !== 0 && authenFind.check_status === 1" class="mar" style="width: 840px;">
			<div style="height: 28px;">认证信息</div>
			<div class="wid100 hei40 item-l item-bor1 dis">
				<div class="item-p hei100 dis disAl disJuB item-w item-bor">
					<div>企业名称</div>
					<div>{{authenFind.enterprise_name}}</div>
				</div>
				<div class="item-p item-w hei100 dis disAl disJuB">
					<div>企业电话</div>
					<div>{{authenFind.mobile}}</div>
				</div>
			</div>
			<div class="wid100 hei40 item-l item-bor1 dis">
				<div class="item-p hei100 dis disAl disJuB item-w item-bor">
					<div>法人姓名</div>
					<div>{{authenFind.legal_person}}</div>
				</div>
				<div class="item-p item-w hei100 dis disAl disJuB">
					<div>认证地址</div>
					<div>{{authenFind.province}}-{{authenFind.city}}-{{authenFind.area}}</div>
				</div>
			</div>
			<div class="wid100 item-l item-bor1 dis disAl item-p1">
				<div style="padding-top: 10px;width: 200px;">营业执照照片</div>
				<div style="width: 100px;height: 100px;">
					<img :src="authenFind.business_license" class="wh100" />
				</div>
			</div>
		</div>
		<div v-if="is_show" id="commonBg" class="m-dialog-bg" />
		<div v-if="is_show"
			style="background: #ffffff; border-radius: 10px; font-size: 14px; position: absolute;width: 962px;left: 50%;top: 15%; margin-left: -480px; z-index: 1200;">
			<div class="dialog-content-header">
				<span class="dialog-title">公司实名认证</span>
				<span class="dialog-close js-dialog_close" @click="is_show=false" />
			</div>
			<div class="dialog-content-main">
				<div class="contract-form">
					<div class="contract-form__title">实名认证信息</div>
					<el-form ref="ruleForm" :model="ruleForm" :rules="rules">
						<div class="wid100 dis item-bor1 item-l">
							<div class="dis disAl disJuB item-w item-bor item-p1">
								<div><span style="color:red;">*</span>企业名称</div>
								<el-form-item class="mp0" prop="enterprise_name">
									<el-input v-model="ruleForm.enterprise_name" style="width: 200px;"
										placeholder="请填写企业名称" />
								</el-form-item>
							</div>
							<div class="dis disAl disJuB item-w item-p1">
								<div><span style="color:red;">*</span>法人姓名</div>
								<el-form-item class="mp0" prop="legal_person">
									<el-input v-model="ruleForm.legal_person" style="width: 200px;"
										placeholder="请填写法人姓名" />
								</el-form-item>
							</div>
						</div>
						<div class="wid100 dis item-bor1 item-l">
							<div class="dis disAl disJuB item-w item-bor item-p1">
								<div><span style="color:red;">*</span>电话</div>
								<el-form-item class="mp0" prop="mobile">
									<el-input v-model="ruleForm.mobile" style="width: 200px;" placeholder="请填写电话" />
								</el-form-item>
							</div>
							<div class="dis disAl disJuB item-w item-p1">
								<div><span style="color:red;">*</span>身份证号码</div>
								<el-form-item class="mp0" prop="id_card">
									<el-input v-model="ruleForm.id_card" style="width: 200px;" placeholder="请填写身份证号码" />
								</el-form-item>
							</div>
						</div>
						<div class="wid100 dis item-bor1 item-l">
							<div class="dis disAl disJuB item-w item-bor item-p1">
								<div><span style="color:red;">*</span>统一社会信用代码</div>
								<el-form-item class="mp0" prop="id_number">
									<el-input v-model="ruleForm.id_number" style="width: 200px;"
										placeholder="请填写证件编号" />
								</el-form-item>
							</div>
							<div class="dis disAl disJuB item-w item-p1">
								<div><span style="color:red;">*</span>地址</div>
								<el-form-item class="mp0" prop="cascader">
									<el-cascader v-model="ruleForm.cascader" class="inp1" :options="cascaderList"
										:props="optionProps" @change="handleChange" />
								</el-form-item>
							</div>
						</div>
						<div class="contract-form__certified-code item-bor1">
							<div class="contract-form__label label-w135" style="height: 34px; line-height: 34px;"><span
									style="color:red;">*</span> 营业执照实例</div>
							<div class="contract-form__val">
								<!-- <el-form-item class="mp0" prop="id_type">
									<el-input v-model="ruleForm.id_type" style="width: 480px;"
										placeholder="请从营业执照获取，由18位数字或大写拉丁字母组成" />
								</el-form-item> -->
								<div class="code-example">
									<div class="code-example__title">示例：</div>
									<div class="code-example__bd"><img
											src="https://img.keepyoga.com/assets/img_cloud/contract/org_id_card_num.png?v=C8bv4rX0x"
											alt=""></div>
								</div>
							</div>
						</div>
						<div class="item-l item-p1 item-bor1 dis">
							<div style="width: 135px;padding-top: 10px;padding-right: 10px;"><span
									style="color:red;">*</span>营业执照照片</div>
							<el-upload :show-file-list="false" action="#" :http-request="handleAvatarSuccess"
								:before-upload="beforeAvatarUpload">
								<img v-if="ruleForm.business_license" :src="ruleForm.business_license" class="avatar">
								<div v-else class="avatar-uploader-icon dis disAl disJuC">
									<i class="el-icon-plus "></i>
								</div>
							</el-upload>
						</div>

					</el-form>
				</div>
			</div>
			
			<div class="dialog-content-footer">
				<el-button class="space-mr20 btn-auto-34 js-save-certified-info bac6b7" type="primary"
					@click.stop="submitForm('ruleForm')">确定</el-button>
				<el-button class="btn-disabled-auto-34 js-dialog_close" type="info"
					@click="is_show=false">取消</el-button>
			</div>
		</div>
		
	</div>
	<div>
		<iframe v-if="auth_show" :src="authenFind.consoleurl" class="wh100" style="height:100vh;border: none"></iframe>
	</div>
</div>
</template>

<script>
	import {
		getXuan
	} from '@/utils/limits.js'
	import {
		mapGetters
	} from 'vuex' // Secondary package based on el-pagination
	import {
		uploadimg,
		sendCode
	} from '@/api/utils'
	import {
		getAuthenFind,
		getSubmitAuth,
		findent
	} from '@/api/contract'
	import cascaderJSON from '@/api/cascaderList.json'
	export default {
		name: 'realNameCertified',
		components: {},
		data() {
			const valMobile = (rule, value, callback) => {
				const reg = /^1[3456789]\d{9}$/;
				if (!reg.test(value)) {
					callback(new Error('请填写正确手机号'))
				} else {
					callback()
				}
			}
			return {
				cascaderList: cascaderJSON,
				optionProps: {
					value: "value",
					label: "value",
					children: "children"
				},
				is_show: false,
				authenFind: {},
				auth_show:false,
				ruleForm: {
					enterprise_name: '',
					id_type: '',
					id_number: '',
					legal_person: '',
					id_card: '',
					mobile: '',
					business_license: '',
					province: '',
					city: '',
					area: '',
					cascader: ''
				},
				rules: {
					enterprise_name: [{
						required: true,
						message: '请填写企业名称',
						trigger: 'blur'
					}],
					id_type: [{
						required: true,
						message: '请填写统一社会信用代码',
						trigger: 'blur'
					}],
					id_number: [{
						required: true,
						message: '请填写证件编号',
						trigger: 'blur'
					}],
					legal_person: [{
						required: true,
						message: '请填写法人姓名',
						trigger: 'blur'
					}],
					id_card: [{
						required: true,
						message: '请填写身份证号码',
						trigger: 'blur'
					}],
					mobile: [{
						required: true,
						validator: valMobile,
						trigger: 'blur'
					}],
					cascader: [{
						required: true,
						message: '请选择地址',
						trigger: 'change'
					}]
				},
			}
		},
		computed: {
			...mapGetters([
				'permission_routes',
				'roles'
			])
		},
		created() {
			var xuanList = [{
				name: '实名认证',
				url: '/contract/realNameCertified',
				pd: true
			}]
			var xuanList1 = getXuan(xuanList, this.roles)
			this.$store.dispatch('user/changeXuan', {
				key: 'xuanList',
				value: xuanList1
			})
			this.$store.dispatch('user/changeXuan', {
				key: 'xuan',
				value: 0
			})
			this.getAuthenFind()
		},
		methods: {
			submitForm(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						if (!this.ruleForm.business_license) {
							this.$message.error('请上传营业执照照片')
							return false
						}
						getSubmitAuth({
							enterprise_name: this.ruleForm.enterprise_name,
							id_type: this.ruleForm.id_type,
							id_number: this.ruleForm.id_number,
							legal_person: this.ruleForm.legal_person,
							id_card: this.ruleForm.id_card,
							mobile: this.ruleForm.mobile,
							business_license: this.ruleForm.business_license,
							province: this.ruleForm.province,
							city: this.ruleForm.city,
							area: this.ruleForm.area
						}).then(response => {
							this.getAuthenFind()
						}).catch(error => {
							console.log(error)
						})
					} else {
						this.$message.error('请按规则填写完整信息')
						return false
					}
				})
			},
			handleAvatarSuccess(file) {
				var that = this
				let mf = new FormData()
				mf.append('file', file.file)
				uploadimg(mf).then(response => {
					that.ruleForm.business_license = response.data
				})
			},
			beforeAvatarUpload(file) {
				const isJPG = file.type === 'image/jpeg' || file.type === 'image/png'
				const isLt2M = file.size / 1024 / 1024 < 5
				if (!isJPG) {
					this.$message.error('上传头像图片只能是 JPG或PNG 格式!')
				}
				if (!isLt2M) {
					this.$message.error('上传头像图片大小不能超过 5MB!')
				}
				return isJPG && isLt2M
			},
			handleChange(e) {
				console.log(e)
				console.log(this.ruleForm.cascader)
				this.ruleForm.province = e[0]
				this.ruleForm.city = e[1]
				this.ruleForm.area = e[2]
			},
			consoleurlshow() {
				console.log('展示啊尼玛的')
				this.auth_show = true;
			},
			findent(){

				findent({enterprise_name:this.authenFind.enterprise_name}).then(response => {
					const {
						data
					} = response
					this.getAuthenFind()
				}).catch(error => {
					console.log(error)
				})
			},
			getAuthenFind() {
				this.is_show = false
				getAuthenFind().then(response => {
					const {
						data
					} = response
					this.authenFind = data.data
				}).catch(error => {
					console.log(error)
				})
			}
		}
	}
</script>

<style scoped>
	.app-container {
		padding: 20px;
	}

	.edit-input {
		padding-right: 100px;
	}

	.cancel-btn {
		position: absolute;
		right: 15px;
		top: 10px;
	}

	.typelists {
		cursor: pointer;
		margin-right: 30px;
		margin-bottom: 10px;
		vertical-align: middle;
		font-size: 12px;
	}

	.typexuan {
		color: #41c3a8;
	}
	.shenhe{
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	::v-deep .el-table--enable-row-hover .el-table__body tr:hover>td {
		background-color: #616b74;
		color: #fff;
	}

	::v-deep .el-table--enable-row-hover .el-table__body tr>td {
		color: #000;
	}

	/* ::v-deep .el-table__body .el-table__row.hover-row td {
		background-color: #616b74
	} */

	.certified-title {
		font-size: 24px;
		font-weight: 700;
		line-height: 1;
		margin-bottom: 80px;
	}

	.certified-type__content {
		margin-bottom: 13px;
		line-height: 1;
		font-size: 20px;
		font-weight: 700;
	}

	.certified-type__sub-content {
		margin-bottom: 36px;
		line-height: 1.5;
		font-size: 14px;
	}

	.m-dialog-bg {
		position: fixed;
		z-index: 1000;
		background: rgba(0, 0, 0, .4);
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
	}

	.dialog-content-header {
		position: relative;
		padding: 30px 0 10px;
		font-size: 20px;
		line-height: 20px;
		border-bottom: 1px solid #d9d9d9;
		margin: 0 60px;
		font-weight: 700;
	}

	.dialog-close {
		position: absolute;
		right: 0;
		top: 28px;
		width: 24px;
		height: 24px;
		background: url(../../../public/img/close.svg?v=ed587d0) no-repeat 0 0;
		background-size: 24px 24px;
		cursor: pointer;
	}

	.dialog-content-main {
		padding: 20px 60px;
	}

	.contract-form__title {
		height: 22px;
		font-size: 12px;
		color: #787878;
	}

	.contract-form__item {
		display: flex;
		padding: 5px 15px;
		margin-bottom: 8px;
		background: #f2f2f2;
		min-height: 42px;
		line-height: 32px;
		box-sizing: border-box;
	}

	.label-w135 {
		width: 135px;
	}

	.contract-form__label {
		padding-right: 10px;
	}

	.contract-form__certified-code {
		display: flex;
		padding: 12px 15px;
		background: #f2f2f2;
	}

	.code-example {
		margin-top: 14px;
	}

	.code-example__title {
		margin-bottom: 8px;
		line-height: 1;
		font-size: 12px;
		color: #787878;
	}

	.dialog-content-footer {
		padding: 20px 30px 40px;
		text-align: center;
	}

	.inp1 {
		width: 200px;
	}

	.inp1 ::v-deep .el-input__inner {
		width: 100%;
	}

	.avatar {
		width: 160px;
		height: 114px;
	}

	.avatar-uploader-icon {
		width: 160px;
		height: 114px;
		border: 2px #000 dashed;
		border-radius: 5px;
	}
</style>